<!--物流信息弹框-->
<template>
  <el-dialog title="物流查询" width="600px" v-dialogDrag :visible.sync="logisticsVisible" @close="logisticsVisible = false">
    <div class="block">
      <div class="item"><span class="label">订单编号:</span><span>123</span></div>
      <div class="item"><span class="label">下单时间:</span><span>123</span></div>
      <div class="item"><span class="label">商家名称:</span><span>123</span></div>
      <div class="item"><span class="label">配送状态:</span><span>123</span></div>
    </div>
    <div class="main">
      <div class="title d-flex flex-between ">
        <div class="logisticsTitle">申通快递 773185710345284</div>
        <div class="copy" @click="handleCopy">复制</div>
      </div>
      <div class="flow">
        <el-timeline >
          <el-timeline-item
            v-for="(activity, index) in list"
            :key="index"
            :color="index=='0'?'#FF6A18':'#909399'"
            :timestamp="activity.context">
            <div>
               <span class="status" style="margin-right:8px;font-size: 16px;">{{activity.status}}</span><span class="time">{{activity.time | format}}</span>
            </div>

          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

  </el-dialog>
</template>

<script>
 export default {
   name: "afterSale",
   props: ['afterSaleObj','img'],
   watch: {
   	// afterSaleObj: function(value) {
   	// 	this.afterSaleList = value;
   	// },
   	// img: function(value) {
   	// 	this.attachmentInfoList = value;
   	// 	console.log(this.attachmentInfoList)
   	// },
   },
   data(){
     return{
       afterSaleList:{},
       attachmentInfoList:[],//凭证图片
       logisticsVisible:true,
       oddNumber:'123123',
       activities: [{
           content: '活动按期开始',
           timestamp: '2018-04-15'
         }, {
           content: '通过审核',
           timestamp: '2018-04-13'
         }, {
           content: '创建成功',
           timestamp: '2018-04-11'
         }]
        ,list:[
                     {
                                    "time":"2022-01-25 15:08:35",
                                    "context":"[怀化市]您的快件已签收，如有疑问请电联快递员【唐洲，电话：135****1234】。疫情期间顺丰每日对网点消毒、快递员每日测温、配戴口罩，感谢您使用顺丰，期待再次为您服务。（主单总件数：1件）",
                                    "ftime":"2022-01-25 15:08:35",
                                    "areaCode":"CN431225000000",
                                    "areaName":"湖南,怀化市,会同县",
                                    "status":"签收",
                                    "location":null,
                                    "areaCenter":null,
                                    "areaPinYin":null,
                                    "statusCode":null
                                },
                                {
                                    "time":"2022-01-25 15:01:14",
                                    "context":"[怀化市]快件交给唐洲,正在派送途中（联系电话：135****1234,顺丰已开启“安全呼叫”保护您的电话隐私,请放心接听！）（主单总件数：1件）",
                                    "ftime":"2022-01-25 15:01:14",
                                    "areaCode":"CN431200000000",
                                    "areaName":"湖南,怀化市",
                                    "status":"派件",
                                    "location":null,
                                    "areaCenter":null,
                                    "areaPinYin":null,
                                    "statusCode":null
                                },

        ]
     }
   },
   filters: {
       format(value) {
         if(value){
           return value.substring(5,16)
         }
       }
     },
   mounted() {
   },
   methods:{
      handleCopy(){
              //this.copyTxt= this.$refs.num.innerText;
             var input = document.createElement("input"); // 直接构建input
             input.value = this.oddNumber; // 设置内容
             document.body.appendChild(input); // 添加临时实例
             input.select(); // 选择实例内容
             document.execCommand("Copy"); // 执行复制
             document.body.removeChild(input); // 删除临时实例
              this.$message.success('复制成功');
      }
   }
 }
</script>

<style lang="scss" scoped>
  .flow /deep/ .el-timeline-item:first-child .el-timeline-item__content{
    color:#FF6A18
  }
  .flow /deep/ .el-timeline-item__timestamp{
    margin-top:4px;
    line-height: 1.5;
  }
  .block{
    color:#666666;
    .item{
      padding-bottom: 7px;
      .label{
        padding-right: 8px;
      }
    }
  }
  .title{
    padding-bottom:10px;
     padding-top:10px;
     margin-bottom: 10px;
     border-top:1px solid #F1F1F1;
      border-bottom:1px solid #F1F1F1;
    .copy{
      cursor: pointer;
    }
  }
</style>
